<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复习 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <!-- 复习头部 -->
            <div class="flex justify-between items-center mb-6">
                <div>
                    <a href="home.html" class="inline-flex items-center text-gray-600">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span>复习测试</span>
                    </a>
                    <div class="flex items-center mt-1">
                        <span class="badge badge-primary mr-2">雅思核心词汇</span>
                        <span class="text-sm text-gray-500">45个待复习单词</span>
                    </div>
                </div>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 复习进度 -->
            <div class="mb-6">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm text-gray-600">复习进度</span>
                    <span class="text-sm font-medium">15/45 单词</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 33%"></div>
                </div>
            </div>
            
            <!-- 复习测试卡片 - 选择题模式 -->
            <div class="card p-6 mb-6 slide-up">
                <div class="flex justify-between items-center mb-6">
                    <span class="badge badge-primary">选择题 · #16</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-4">剩余时间: 18秒</span>
                        <button class="text-gray-400 hover:text-gray-600">
                            <i class="fas fa-volume-up text-lg"></i>
                        </button>
                    </div>
                </div>
                
                <h2 class="text-xl font-bold text-center mb-1">ubiquitous</h2>
                <div class="text-gray-500 text-center mb-6">/juːˈbɪk.wɪ.təs/</div>
                
                <p class="text-center text-lg mb-8">选择正确的定义：</p>
                
                <div class="space-y-3">
                    <button class="w-full text-left p-4 border border-gray-300 rounded-lg hover:bg-gray-50">
                        lasting for a very short time
                    </button>
                    
                    <button class="w-full text-left p-4 border border-blue-500 rounded-lg bg-blue-50 hover:bg-blue-100">
                        seeming to be everywhere
                    </button>
                    
                    <button class="w-full text-left p-4 border border-gray-300 rounded-lg hover:bg-gray-50">
                        very strong and healthy; full of energy
                    </button>
                    
                    <button class="w-full text-left p-4 border border-gray-300 rounded-lg hover:bg-gray-50">
                        extremely beautiful and attractive
                    </button>
                </div>
                
                <div class="mt-8 flex justify-center">
                    <button class="btn btn-primary px-8 py-3">
                        确认答案
                    </button>
                </div>
            </div>
            
            <!-- 复习测试卡片 - 填空题模式 -->
            <div class="card p-6 mb-6">
                <div class="flex justify-between items-center mb-6">
                    <span class="badge">拼写 · #17</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-4">剩余时间: 25秒</span>
                    </div>
                </div>
                
                <div class="mb-8">
                    <p class="text-center text-lg mb-4">根据释义拼写单词：</p>
                    <p class="text-center font-medium text-xl mb-2">seeming to be everywhere</p>
                    <p class="text-center text-gray-500 mb-2">提示: /juːˈbɪk.wɪ.təs/</p>
                </div>
                
                <div class="mb-8">
                    <input type="text" class="form-input text-center text-xl font-bold" placeholder="请输入答案">
                </div>
                
                <div class="mt-8 flex justify-center">
                    <button class="btn btn-primary px-8 py-3">
                        提交答案
                    </button>
                </div>
            </div>
            
            <!-- 复习测试卡片 - 汉译英模式 -->
            <div class="card p-6 mb-6">
                <div class="flex justify-between items-center mb-6">
                    <span class="badge">汉译英 · #18</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-4">剩余时间: 28秒</span>
                    </div>
                </div>
                
                <div class="mb-8">
                    <p class="text-center text-lg mb-4">将中文翻译成对应的英文单词：</p>
                    <p class="text-center font-medium text-xl mb-2">无处不在的，普遍存在的</p>
                    <p class="text-center text-gray-500 mb-2">提示: 以 u 开头</p>
                </div>
                
                <div class="mb-8">
                    <input type="text" class="form-input text-center text-xl font-bold" placeholder="请输入答案">
                </div>
                
                <div class="mt-8 flex justify-center">
                    <button class="btn btn-primary px-8 py-3">
                        提交答案
                    </button>
                </div>
            </div>
            
            <!-- 复习测试卡片 - 例句填空模式 -->
            <div class="card p-6">
                <div class="flex justify-between items-center mb-6">
                    <span class="badge">例句填空 · #19</span>
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-4">剩余时间: 30秒</span>
                    </div>
                </div>
                
                <div class="mb-8">
                    <p class="text-center text-lg mb-4">根据上下文填入合适的单词：</p>
                    <p class="text-center font-medium text-xl mb-4">
                        Mobile phones are now <span class="border-b-2 border-blue-500 px-2">______</span> in our society.
                    </p>
                    <p class="text-center text-gray-500 mb-2">提示: 无处不在的</p>
                </div>
                
                <div class="mb-8">
                    <input type="text" class="form-input text-center text-xl font-bold" placeholder="请输入答案">
                </div>
                
                <div class="mt-8 flex justify-center">
                    <button class="btn btn-primary px-8 py-3">
                        提交答案
                    </button>
                </div>
            </div>
            
            <!-- 复习控制按钮 -->
            <div class="fixed bottom-24 left-0 right-0 flex justify-center space-x-4 p-4 bg-white dark:bg-gray-900 shadow-md">
                <button class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-700">
                    <i class="fas fa-arrow-left text-lg"></i>
                </button>
                
                <button class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-700">
                    <i class="fas fa-pause text-lg"></i>
                </button>
                
                <button class="w-14 h-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-700">
                    <i class="fas fa-arrow-right text-lg"></i>
                </button>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 